<template>
    <span class="container" @click="spanClick(id)">
        <div id="div1" :style="{background:(active?'rgba(63, 158, 255, 0.5)':'#409EFF')}" :title="inputValue">{{inputValue}}</div>
        <div id="div2" :style="{ borderLeft: (active?'13px solid rgba(63, 158, 255, 0.5)':' 13px solid #409EFF')}"></div>
    </span>
</template>

<script>

    export default {
        name: "stepBox",
        props: {
            inputValue: '',
            id: '',
            active:'',
            currentIndex: {
                type: [Number, String]
            }
        },
        data() {
            return {
                getId: '',
            }
        },
        watch: {
            id() {
                this.getId = this.id;
            }
        },
        methods: {
            spanClick(id){
                this.$emit('handleClose', id, this.currentIndex);
            },
        }
    }
</script>


<style scoped>
    .container {
        display: flex;
        cursor: pointer;
      margin-right: 10px;
    }

    #div1 {
        padding-left: 5px;
        padding-right: 5px;
        width: 100px;
        height: 30px;
        border: 1px solid #000 transparent;

        /*padding-left: 0px;*/
        line-height: 30px;
        font-weight: bold;
        text-align: center;

        /*省略号*/
        display: inline-block;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        vertical-align: bottom;
      color: white;
    }

    #div2 {
        width: 0;
        height: 0;
        border-left: 13px solid #b6e1ff;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

</style>
